<script lang="ts" setup name="BeginPhysicalExamination">
import {ref, defineAsyncComponent, onActivated, reactive} from 'vue'
import {showMessageBox} from '@/util/element'
import {DoctorDesk, getDiagnosticTableDetail} from '@/api/medicalExaminerDesk/beginPhysicalExamination'
import {useRoute} from 'vue-router'
const route = useRoute()
// 首选组件
const componentKey = ref('1')
// 体检登记表id
const checkupRegisterId = ref<string>(`${route.query.checkupRegisterId}` || '')
// 组件实例
const componentRef = ref()
const tabList = [
  {name: '一般状况', value: '1', component: defineAsyncComponent(() => import('./components/generalSituation.vue'))},
  {name: '生活方式', value: '2', component: defineAsyncComponent(() => import('./components/lifeStyle.vue'))},
  {name: '脏器功能', value: '3', component: defineAsyncComponent(() => import('./components/visceraAbility.vue'))},
  {name: '查体', value: '4', component: defineAsyncComponent(() => import('./components/checkBody.vue'))},
  {name: '现存主要健康问题', value: '5', component: defineAsyncComponent(() => import('./components/mainHealthProblems.vue'))},
  {name: '住院治疗情况', value: '6', component: defineAsyncComponent(() => import('./components/hospitalCourse.vue'))},
  {name: '主要用药情况', value: '7', component: defineAsyncComponent(() => import('./components/mainMedication.vue'))},
  {name: '非免疫规划预防接种史', value: '8', component: defineAsyncComponent(() => import('./components/vaccinationHistory.vue'))},
  {name: '检验结果', value: '9', component: defineAsyncComponent(() => import('./components/inspectionReport.vue'))},
  {name: '检查结果', value: '10', component: defineAsyncComponent(() => import('./components/checkUpReport.vue'))},
  {name: '健康评价', value: '11', component: defineAsyncComponent(() => import('./components/healthEvaluation.vue'))}
]

// 医生诊台数据
const doctorDesk = reactive<Partial<DoctorDesk>>({})

// 禁止编辑
const disEdit = ref<boolean>(false)

/**
 * @description: 获取医生诊台详细数据
 * @return {*}
 */
const getDiagnosticTableInfor = () => {
  checkupRegisterId.value &&
    getDiagnosticTableDetail(checkupRegisterId.value).then((res) => {
      // 未检大类
      let notTestCategory = res.data?.data?.notTestCategory || ''
      // 去掉健康评价
      notTestCategory = notTestCategory?.replace(/健康评价、|、健康评价|健康评价/g, '')
      // 如果当前已经在健康评价页面了（页面缓存的情况)
      if (notTestCategory && componentKey.value === '11') {
        componentKey.value = '1'
        return
      }
      const {data} = res.data
      Object.assign(doctorDesk, data)
    })
}

/**
 * @description: tab切换之前校验
 * @param {*} activeName // 健康体检的tab才校验
 * @return {*}
 */
const onBeforeTabLeave = async (activeName) => {
  // 切换健康评价之前调接口
  if (activeName === '11') {
    const beforeTab = await getDiagnosticTableDetail(checkupRegisterId.value)
      .then((res) => {
        // 未检大类
        let notTestCategory = res.data?.data?.notTestCategory || ''
        // 去掉健康评价
        notTestCategory = notTestCategory?.replace(/健康评价、|、健康评价|健康评价/g, '')
        // 如果匹配到未检测的体检大类就弹窗提示
        if (notTestCategory) {
          showMessageBox(`${notTestCategory}体检大类未填写，暂不可总检！`, {title: '提示', mesageType: 'base', hideCancel: true, confirmText: '关闭'}).catch((err) => {
            console.warn(err)
          })
          return false // 终止循环
        } else {
          return true
        }
      })
      .catch((err) => {
        console.warn(err)
        return false
      })
    return beforeTab // 返回false会终止切换tab
  }
}

/**
 * @description: 获取路由参数
 * @return {*}
 */
const getRouteQuery = () => {
  route.query?.checkupRegisterId && (checkupRegisterId.value = `${route.query?.checkupRegisterId}`)
  // 有登记id就要重新读取一下路由参数
  route.query?.checkupRegisterId && (disEdit.value = Boolean(route.query?.disEdit))
}

onActivated(() => {
  getRouteQuery()
  // 体检登记表id
  getDiagnosticTableInfor()
})
</script>
<template>
  <div class="page__wapper d-common-full">
    <el-scrollbar class="header-scrollbar">
      <ul class="begin-physical-examination-header d-common-flex-row">
        <li class="infor-number">
          体检号：
          <el-tooltip class="infor-item" effect="dark" :content="doctorDesk.checkupNo" placement="top">
            {{ doctorDesk.checkupNo }}
          </el-tooltip>
        </li>
        <li class="infor-name">
          姓名：
          <el-tooltip class="infor-item" effect="dark" :content="doctorDesk.personName" placement="top">
            {{ doctorDesk.personName }}
          </el-tooltip>
        </li>
        <li class="infor-name">
          性别：
          <el-tooltip class="infor-item" effect="dark" :content="doctorDesk.gender" placement="top">
            {{ doctorDesk.gender }}
          </el-tooltip>
        </li>
        <li class="infor-name">
          年龄：
          <el-tooltip class="infor-item" effect="dark" :content="`${doctorDesk.age}`" placement="top">
            {{ doctorDesk.age }}
          </el-tooltip>
        </li>
        <li class="infor-text">
          体质辨识：
          <el-tooltip class="infor-item" effect="dark" :content="doctorDesk.tcmResult" placement="top">
            {{ doctorDesk.tcmResult }}
          </el-tooltip>
        </li>
        <li class="infor-text">
          居住地址：
          <el-tooltip class="infor-item" effect="dark" :content="doctorDesk.address" placement="top">
            {{ doctorDesk.address }}
          </el-tooltip>
        </li>
        <li class="infor-text">
          既往史：
          <el-tooltip class="infor-item" effect="dark" :content="doctorDesk.pastHistory" placement="top">
            {{ doctorDesk.pastHistory }}
          </el-tooltip>
        </li>
      </ul>
    </el-scrollbar>
    <el-tabs v-model="componentKey" :before-leave="onBeforeTabLeave" type="card" class="physical-examination-tabs">
      <el-scrollbar class="d-common-full">
        <el-tab-pane v-for="item in tabList" :key="item.value" :label="item.name" :name="item.value" :lazy="true">
          <keep-alive>
            <component
              :is="item.component"
              v-if="item.value === componentKey"
              ref="componentRef"
              :key="checkupRegisterId"
              :dis-edit="disEdit"
              :checkup-register-id="checkupRegisterId"
              :gender="doctorDesk.gender || ''"
            />
          </keep-alive>
        </el-tab-pane>
      </el-scrollbar>
    </el-tabs>
  </div>
</template>
<style lang="less">
.page__wapper {
  background-color: var(--d-color-grey-2);
  padding: var(--d-margin-level-2) var(--d-margin-level-2) 0 var(--d-margin-level-2);
}
.begin-physical-examination-header {
  justify-content: flex-start;
  align-items: center;
  list-style: none;
  height: 56px;
  min-width: fit-content;
  padding: 18px 23px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
  background: var(--d-color-white);
  color: var(--d-font-color-text);
  white-space: nowrap;
  li {
    margin-right: 40px;
    display: flex;
    align-items: center;
    span {
      display: inline-block;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &.infor-text {
      span {
        max-width: 120px;
      }
    }
  }
}
.header-scrollbar {
  height: 56px;
}
.physical-examination-tabs {
  height: auto;
  .el-tabs__header {
    margin: 0;
  }
  .el-tabs__item {
    margin: 0 3px;
    background: #98a9b3;
    color: var(--d-color-white);
    border-radius: 4px 4px 0px 0px;
    &.is-active {
      background: var(--theme-color);
    }
  }
  .el-tabs__content {
    background: var(--d-color-white);
    height: calc(100vh - 220px);
  }
}
.begin-physical-examination-footer {
  height: 60px;
  background: var(--d-color-white);
  box-shadow: 0px -3px 9px 1px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  .doctor {
    color: var(--d-font-color-text);
  }
  .el-input {
    width: 210px;
    height: 32px;
    margin-right: 10px;
  }
}
</style>
<style lang="less">
.error-tip {
  i {
    margin-right: 5px;
  }
  .el-popper__arrow::before {
    background: #ffdbdb !important;
  }
  &.el-popover {
    display: flex;
    align-items: center;
    color: #e13848;
    background: #ffdbdb;
    pointer-events: none; // 这个属性可以避免气泡提示被点击，其他input框不能获取焦点
  }
}
.d-check-up-desk-content {
  padding: 20px;
  min-height: calc(100vh - 280px);
}
.d-check-up-desk-footer {
  position: sticky;
  bottom: -1px;
  z-index: 5;
  height: 60px;
  background: var(--d-color-white);
  box-shadow: 0px -3px 9px 1px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  .doctor {
    color: var(--d-font-color-text);
  }
  .el-input {
    width: 210px;
    height: 32px;
    margin-right: 10px;
  }
}
</style>
